<template>
	<view class="record">
		<i-scrollList @more="more" height="100vh" :total="pageData.total" :pageTotal="pageList.length">
			<view class="record_item" v-for="item in pageList" :key="item.cashOrderId"
				@click="toDeatail(item.cashOrderId)">
				<view class="item_c">
					<text class="titles">提现</text>
					<text>{{approval_state_type[item.status]}}</text>
				</view>
				<view class="item_c">
					<text class="timer">{{item.createTime}}</text>
					<text class="price">-{{item.amount}}</text>
				</view>
				<text class="timer rejectReason" v-if="item.rejectReason">{{item.rejectReason}}</text>
			</view>
			<view v-if="skeleton" v-for="item in 10" :key="item" style="margin-top: 20rpx;">
				<i-skeleton size="32rpx" :icon="false" :rowsW="['40%', '60%', ]" :rowsH="['28rpx', '24rpx']"
					height="140rpx" :rows="2">
				</i-skeleton>
			</view>
		</i-scrollList>
	</view>
</template>

<script lang="ts" setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {
		approval_state_type
	} from '../../utils/enums'
	import {
		navTo
	} from '../../utils/common'
	import {
		getMerCashOrderList
	} from '../../api/store'

	const pageData = reactive({
		tyjPageNum: 1,
		tyjPageSize: 15,
		total: 0
	})
	const pageList = ref<any[]>([])
	const skeleton = ref(true)

	const more = () => {
		pageData.tyjPageNum++
		getPageList()
	}
	const toDeatail = (cashOrderId : string) => {
		navTo('/pages/withdrawal/detail?cashOrderId=' + cashOrderId, 'navigateTo')
	}
	const getPageList = async () => {
		const data = await getMerCashOrderList({
			tyjPageNum: pageData.tyjPageNum,
			tyjPageSize: pageData.tyjPageSize
		})
		pageList.value = pageList.value.concat(data.rows)
		pageData.total = data.total
		skeleton.value = false
	}
	getPageList()
</script>

<style lang="scss" scoped>
	.record {
		width: 100%;
		height: 100vh;

		.record_item {
			@include flexC;
			margin-left: 32rpx;
			border-bottom: 1rpx solid $backColor;
			padding: 32rpx 0;
			padding-right: 32rpx;

			.item_c {
				@include flexRS;
				@include dfont;
				margin-bottom: 16rpx;

				.titles {
					@include titlefont(28rpx);
				}
			}
			.rejectReason {
				padding: 24rpx 32rpx;
				background-color: rgba(242, 242, 247, 0.5);
				border-radius: 12rpx;
			}

			.timer {
				@include dfont(24rpx);
				margin-top: 8rpx;
				color: #A0A0AD;
				white-space: normal
			}

			.price {
				@include dprice(32rpx);
			}
		}
	}
</style>